<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto">
            <el-form-item label="表单名称:">
              <el-select v-model="params.sheetVariableName" placeholder="请选择" clearable size="mini" style="width: 160px;">
                <el-option v-for="item in sheetNames" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="Excel列号">
              <el-input v-model="params.rowSite" placeholder="输入Excel对应的列搜索" size="mini" clearable style="width: 160px;" />
            </el-form-item>
            <el-form-item label="Excel列名">
              <el-input v-model="params.rowName" placeholder="输入Excel对应的列名搜索" size="mini" clearable style="width: 160px;" />
            </el-form-item>
            <!-- <el-form-item label="作业类型">
              <el-select v-model="params.jobType" placeholder="请选择作业类型" clearable style="width: 200px;">
                <el-option
                  v-for="item in optionsJobType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item label="规则作业类">
              <el-select v-model="params.applyType" placeholder="请选择" clearable size="mini" style="width: 160px;">
                <el-option v-for="item in ruleApplyTypes" :key="item.value" :label="item.name" :value="item.value" clearable />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-search" round @click="toQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:5px">
      <el-button size="mini" type="danger" style="float:right;margin-bottom:5px;" icon="el-icon-remove" round @click="batchDelete">批量删除</el-button>
      <el-button size="mini" type="success" style="float:right;margin-bottom:5px;margin-right:0px;" round icon="el-icon-circle-plus" @click="addRule1">新增规则</el-button>
      <el-table ref="dataList" :data="data" :row-key="getRowKeys" stripe size="small" border style="width: 100%;" :height="tableHeight" @selection-change="handleSelectionChange">
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column :show-overflow-tooltip="true" label="规则编号" prop="id" fixed="left" />
        <!-- <el-table-column :show-overflow-tooltip="true" label="作业类型" prop="jobType" /> -->
        <el-table-column :show-overflow-tooltip="true" label="规则业务类" prop="applyType">
          <template slot-scope="scope">
            <span>{{ businessType(scope.row.businessTypeIds) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="表单名称" prop="sheetName">
          <template slot-scope="scope">
            <span>{{ sheetName(scope.row.sheetVariableName) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="Excel列号" prop="rowSite" />
        <el-table-column :show-overflow-tooltip="true" label="Excel列名" prop="rowName" />
        <el-table-column :show-overflow-tooltip="true" label="最小字符长度" prop="miniCharLength" />
        <el-table-column :show-overflow-tooltip="true" label="最大字符长度" prop="maxCharLength" />
        <!-- <el-table-column :show-overflow-tooltip="true" label="运行顺序" prop="exeSeq" />
        <el-table-column :show-overflow-tooltip="true" label="是否继续运行" :formatter="formatIs" prop="isRun" /> -->
        <el-table-column :show-overflow-tooltip="true" label="例外反馈信息" prop="exceptionFeedback" />
        <el-table-column :show-overflow-tooltip="true" label="生效日期" prop="effectiveDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.effectiveDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="失效日期" prop="expirationDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.expirationDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="创建人" prop="createdBy" />
        <el-table-column :show-overflow-tooltip="true" label="最后更新人" prop="updatedBy" />
        <el-table-column :show-overflow-tooltip="true" label="创建时间" prop="createdTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="最后更新时间" prop="updatedTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updatedTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="185" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" style="margin-left:0px;" icon="el-icon-edit" round @click="updRule1(scope.row)">修改</el-button>
            <el-button size="mini" type="warning" style="margin-left:0px;" icon="el-icon-remove" round @click="deleteRule1(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <addRule1 ref="addRule1" :parent="parent" />
  </div>
</template>

<script>
import { deleteRule1Info, batchDeleteRule1 } from '@/api/rule1'
import initServiceData from '@/utils/initServiceData'
import addRule1 from '@/views/rules/rule1/addRule1'
import { findRuleSheetNames, findRule3ApplyTypes } from '@/api/rule3'
import { parseTime } from '@/utils/index'
import { Message } from 'element-ui'

export default {
  components: { addRule1 },
  mixins: [initServiceData],
  data() {
    return {
      parent: this,
      ids: [],
      ruleApplyTypes: [{ name: '', value: null }],
      // optionsJobType: [{ value: '新品创建', label: '新品创建' },
      //   { value: '字段变更', label: '字段变更' }, { value: '交叉商品', label: '交叉商品' },
      //   { value: 'Trait号变更', label: 'Trait号变更' }, { value: 'PLU#变更', label: 'PLU#变更' }, { value: '删除', label: '删除' },
      //   { value: '商品激活', label: '商品激活' }, { value: '商品转类型', label: '商品转类型' }],
      activeName: '1',
      sheetNames: [{ name: '', value: null }],
      tableHeight: window.innerHeight * 0.58
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
    this.loadApplyType()
    this.loadSheetNames()
  },
  methods: {
    parseTime,
    doLayout() {
      if (this.$refs.dataList) {
        this.$refs.dataList.doLayout()
      }
    },
    beforeInit() {
      this.url = '/rules/queryRule001All'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    resetForm() {
      this.params = { rowSite: '', rowName: '' }
    },
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    applyTypeName(applyType) {
      for (var i = 0; i < this.ruleApplyTypes.length; i++) {
        if (this.ruleApplyTypes[i].value === applyType) {
          return this.ruleApplyTypes[i].name
        }
      }
      return applyType
    },
    businessType(businessTypeIds) {
      var businessTypes = ''
      if (businessTypeIds !== null && businessTypeIds.length > 0) {
        businessTypeIds.forEach(businessTypeId => {
          this.ruleApplyTypes.forEach(item => {
            if (item.value === businessTypeId) {
              businessTypes += item.name + ';'
            }
          })
        })
      }
      return businessTypes
    },
    loadApplyType() {
      var _this = this
      findRule3ApplyTypes().then(res => {
        _this.ruleApplyTypes = res.result
      })
    },
    sheetName(sheetVariableName) {
      for (var i = 0; i < this.sheetNames.length; i++) {
        if (this.sheetNames[i].value === sheetVariableName) {
          return this.sheetNames[i].name
        }
      }
      return sheetVariableName
    },
    addRule1() {
      const _this = this.$refs.addRule1
      _this.ruleInfo.id = ''
      _this.ruleInfo.rowSite = ''
      _this.ruleInfo.rowName = ''
      _this.ruleInfo.miniCharLength = ''
      _this.ruleInfo.maxCharLength = ''
      _this.ruleInfo.exeSeq = ''
      _this.ruleInfo.isRun = ''
      _this.ruleInfo.exceptionFeedback = ''
      _this.ruleInfo.jobType = ''
      _this.ruleInfo.applyType = ''
      _this.ruleInfo.sheetVariableName = ''
      _this.ruleInfo.effectiveDate = ''
      _this.ruleInfo.expirationDate = ''
      _this.ruleApplyTypes = ''
      // _this.optionsJobType = [{ value: '新品创建', label: '新品创建' },
      //   { value: '字段变更', label: '字段变更' }, { value: '交叉商品', label: '交叉商品' },
      //   { value: 'Trait号变更', label: 'Trait号变更' }, { value: 'PLU#变更', label: 'PLU#变更' }, { value: '删除', label: '删除' },
      //   { value: '商品激活', label: '商品激活' }, { value: '商品转类型', label: '商品转类型' }]
      findRule3ApplyTypes().then(res => {
        _this.ruleApplyTypes = res.result
      })
      _this.dialog = true
      _this.dialogStatus = 'addRule1Map'
    },
    updRule1(row) {
      const _this = this.$refs.addRule1
      // _this.optionsJobType = [{ value: '新品创建', label: '新品创建' },
      //   { value: '字段变更', label: '字段变更' }, { value: '交叉商品', label: '交叉商品' },
      //   { value: 'Trait号变更', label: 'Trait号变更' }, { value: 'PLU#变更', label: 'PLU#变更' }, { value: '删除', label: '删除' },
      //   { value: '商品激活', label: '商品激活' }, { value: '商品转类型', label: '商品转类型' }]
      findRule3ApplyTypes().then(res => {
        _this.ruleApplyTypes = res.result
      })
      _this.dialog = true
      _this.dialogStatus = 'editRule1Map'
      _this.ruleInfo = Object.assign({}, row)
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 列表排序触发
    // sortChange(val) {
    //   let sortType = ''
    //   const sortCol = val.prop.replace(/([A-Z])/g, '_$1').toUpperCase()
    //   if (val.order === 'descending') {
    //     sortType = ' DESC'
    //   } else if (val.order === 'ascending') {
    //     sortType = ' ASC'
    //   }
    //   this.params.sort = sortCol + sortType
    //   this.init()
    // },
    deleteRule1(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRule1Info(row.id).then(res => {
          Message({
            message: res.result,
            type: 'success',
            duration: 2 * 1000
          })
          this.toQuery()
        })
      })
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(item => {
        this.ids.push(item.id)
      })
    },
    // 批量删除
    batchDelete() {
      if (this.ids.length <= 0) {
        Message({
          message: '请选择删除项!',
          type: 'warning',
          duration: 2 * 1000
        })
        return
      }
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchDeleteRule1(this.ids).then(res => {
          Message({
            message: res.result,
            type: 'success',
            duration: 2 * 1000
          })
          this.toQuery()
        })
      })
    },
    loadSheetNames() {
      findRuleSheetNames().then(res => {
        this.sheetNames = res.result
      })
    },
    formatIs(row, column) {
      return row.isRun === '1' ? '是' : '否'
    }
  }
}
</script>
